@extends('layout.admin')

@section('title')
    <title>商品类型</title>
@endsection

@section('css')
    <link rel="stylesheet" href="{{asset('admin/css/goodsType.css')}}">
@endsection

@section('content')
    <div class=" admin-content">
        <div class="daohang">
            
        </div>
        <!-- -----------------------------                      添加顶级分类框                      ------------------------------ -->
        <div class="am-popup am-popup-inner" id="my-popup" style="height:170px;">
            <div class="am-popup-hd">
            <h4 class="am-popup-title">添加商品一级分类</h4>
            <span data-am-modal-close class="am-close">&times;</span>
            </div>

            <div class="am-popup-bd">
                <form class="am-form tjlanmu" method="post" action="{{url('admin/CommodityType')}}">
                    {{csrf_field()}}
                    <div class="am-form-group">
                        <div class="zuo">分类名称：</div>
                        <div class="you">
                            <input type="text" class="am-input-sm" name="name" id="doc-ipt-email-1" placeholder="长度不能超过20个字符">
                        </div>
                    </div>
                   
                    <div class="am-form-group am-cf">
                        <div class="you">
                            <p>
                                <button type="submit" class="am-btn am-btn-success am-radius">添加</button>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- -----------------------------                      添加次级分类框                      ------------------------------ -->
        <div class="am-popup am-popup-inner" id="my-popups" style="height:170px;">
            <div class="am-popup-hd">
                <h4 class="am-popup-title">添加子分类</h4>
                <span data-am-modal-close class="am-close">&times;</span> </div>
            <div class="am-popup-bd">
                <form class="am-form tjlanmu" method="post" action="{{url('admin/CommodityType')}}">
                    {{csrf_field()}}
                    <div class="am-form-group">
                        <div class="zuo">分类名称：</div>
                        <div class="you">
                            <input type="hidden" name="pid" id="pid">
                            <input type="hidden" name="path" id="path">
                            <input type="text" class="am-input-sm" name="name" id="doc-ipt-email-1" placeholder="长度不能超过20个字符">
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="you">
                            <p>
                                <button type="submit" class="am-btn am-btn-success am-radius">添加</button>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- -----------------------------                      修改分类                      ------------------------------ -->
        <div class="am-popup am-popup-inner" id="my-popupss" style="height:170px;">
            <div class="am-popup-hd">
                <h4 class="am-popup-title">修改分类</h4>
                <span data-am-modal-close class="am-close">&times;</span> </div>
            <div class="am-popup-bd">
                <form class="am-form tjlanmu updated" method="post" action="{{url('admin/CommodityType')}}">
                    {{csrf_field()}}
                    {{method_field('put')}}
                    <div class="am-form-group">
                        <div class="zuo">新名称：</div>
                        <div class="you">
                            <input type="text" class="am-input-sm" name="name" id="doc-ipt-email-1" placeholder="长度不能超过20个字符">
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="you">
                            <p>
                                <button type="submit" class="am-btn am-btn-success am-radius">修改</button>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-flag on">
                    商品分类管理
                </ul>
                <dl class="am-icon-home" style="float: right;">
                    当前位置： 首页 > <a href="#">商品分类</a>
                </dl>
                <dl>
                    <button type="button" class="am-btn am-modal-no-btn am-btn-danger am-round am-btn-xs am-icon-plus" data-am-modal="{target: '#my-popup', width: 400, height: 225}">添加商品一级分类</button>
                </dl>
                <!--data-am-modal="{target: '#my-popup'}" 弹出层 ID  弹出层 190行 开始  271行结束--> 
                
            </div>
            <div class="am-form am-g">
                <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">

                        <tr class="am-success">
                            <th class="table-id am-text-center">ID</th>
                            <th class="table-title">分类名称</th>
                            <th width="163px" class="table-set">操作</th>
                        </tr>


                    @foreach($res as $v)
                        <tr>
                            <td class="am-text-center sequence">{{$v->id}}</td>
                            <td class="Tname"><span href="#" data-id="{{$v->id}}" data-path="{{$v->path}}">{{$v->name}}</span></td>
                            <td><div class="am-btn-toolbar opertion">
                                    <div class="am-btn-group am-btn-group-xs"> 
                                        <a class="am-btn am-btn-default am-text-success am-icon-file children" data-am-modal="{target: '#my-popups'}" title="添加子分类">
                                        </a>
                                        <a class="am-btn am-btn-default am-btn-xs am-text-secondary update" data-am-modal="{target: '#my-popupss'}" title="修改">
                                            <span class="am-icon-pencil-square-o" ></span>
                                        </a>
                                        <form action="{{url('admin/CommodityType/'.$v->id)}}" class="submitData" method="post" style="display: inline; position: relative; top: -2px; left: -1px;">
                                            {{csrf_field()}}
                                            {{method_field('DELETE')}}
                                            <button class="am-btn am-btn-default am-btn-xs am-text-danger del" title="删除">
                                                <span class="am-icon-trash-o"></span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach   

                </table>
                
                <hr />
            </div>
            <div class="foods">
                <ul>
                    版权所有@2015
                </ul>
                <dl>
                    <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
                </dl>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $(document).on('click', '.Tname', function () {
            var that = $(this);


            //获取此行数据的id值
            var id = $(this).children('span').attr('data-id');
            //拼接子分类的path
            var res = $(this).children('span').attr('data-path') + id + ',';
                    
            //拼接
            var urls = "{{url('admin/CommodityType/')}}"+'/'+res;

            //当前元素有html属性时
            if ($(this).attr('html')) {

                //获取指定元素的static值
                var static = $('tr[path*="'+res+'"]').attr('static');

                //判断static值是否==1
                if (static == '1') {
                    //等于则改变指定元素的static状态，并且隐藏改元素
                    $('tr[path*="'+res+'"]').attr('static', '2');
                    $('tr[path*="'+res+'"]').hide();
                } else {
                    //不等于则将指定元素的static值变为1，删除style属性显示该元素
                    $('tr[pid="'+id+'"]').attr('static', '1');
                    $('tr[pid="'+id+'"]').removeAttr('style');
                }

                //返回false不再执行下面的内容
                return false;
            }


            if ($(this).attr('cli')) {
                return false;
            }
            that.attr('cli', 'true');


            $.ajax({
                type: 'get',
                url: urls,
                dataType: 'json',
                success: function (data) {

                    if (data.code == '1') {
                        //如果返回的数据是一个空数组
                        if (data.data.length == 0) {
                            //去除class属性让其无法再次点击触发ajax
                            that.removeAttr('class');
                            //没有数据返回false,不执行下面的代码
                            return false;
                        }

                        var text = '';

                        //设置子分类前面显示的标志start
                        var num = data.data[0].path.length/2;
                        if (num != 1) {
                            var txt = '';
                            if (num/2 != 1) {
                                for (var j = 0; j < Math.ceil(num/2); j++) {
                                        txt += '&nbsp;&nbsp;';
                                }
                            }
                            txt += '├';
                            for (var i = 0; i < num; i++) {

                                txt += '─';
                            }
                        }
                        //设置子分类前面显示的标志end;
                        $.each(data.data, function (index, key) {
                            
                            //拼接要显示的子类的HTML内容
                            text +='<tr path="'+res+'" pid="'+id+'" static="1" ><td class="am-text-center sequence">'+key["id"]+'</td><td class="Tname"><span href="#" data-id="'+key["id"]+'" data-path="'+key["path"]+'">'+txt+key["name"]+'</span></td><td><div class="am-btn-toolbar opertion"><div class="am-btn-group am-btn-group-xs"><a class="am-btn am-btn-default am-text-success am-icon-file children" data-am-modal="{target: \'#my-popups\'}" title="添加子分类"></a><a class="am-btn am-btn-default am-btn-xs am-text-secondary update" data-am-modal="{target: \'#my-popupss\'}" title="修改"><span class="am-icon-pencil-square-o" ></span></a><form action="'+'{{url("admin/CommodityType")}}'+'/'+key["id"]+'" method="post" class="submitData" style="display: inline; position: relative; top: -2px; left: -1px;">'+'{{csrf_field()}}'+'{{method_field("DELETE")}}'+'<button class="am-btn am-btn-default am-btn-xs am-text-danger del" title="删除"><span class="am-icon-trash-o"></span></button></form></div></div></td></tr>';

                        });
                        //让内容显示在当前元素的tr父类的后面
                        that.parents('tr').after(text);
                        //标记当前元素
                        that.attr('html', 'html');
                    
                    }
                }
            });
        });
    </script>
    <script type="text/javascript" src="{{asset('admin/js/goodsTypeApplication.js')}}"> 
    </script>
@endsection

@section('prompt')
    @if (count('errors'))
        @foreach ($errors->all() as $error)
            <div class='prompt fail'>
                    <p>{{ $error }}</p>
            </div>
        @endforeach
    @endif
@endsection
